<template>
  <ve-popup :model-value="modelValue" @close="close" :maskClose="maskClose">
    <view class="ve-modal">
      <view class="ve-modal-title" v-if="title">
        {{ title }}
      </view>
      <view class="ve-modal-body">
        <slot name="default"></slot>
      </view>
      <view class="ve-modal-footer" v-if="!hideFooter">
        <slot name="footer" v-if="$slots.footer"></slot>
        <template v-else>
          <view
            class="ve-modal-footer-button"
            :class="{ 've-modal-footer-button__cancel': showConfirm }"
            v-if="showCancel"
            @tap="handleCancel()"
          >
            {{ cancelText }}
          </view>
          <view class="ve-modal-footer-button ve-modal-footer-button__confirm" v-if="showConfirm" @tap="handleConfirm()">
            <view class="custom-loading" v-if="okLoading"><ve-icon name="loading_1" size="46" /></view>
            <text v-else>{{ okText }}</text>
          </view>
        </template>
      </view>
      <view class="ve-modal-close" v-if="closable">
        <view class="line"></view>
        <ve-icon name="close" size="64" @click.stop="handleClose()" />
      </view>
    </view>
  </ve-popup>
</template>

<script>
  /**
   * ve-modal 弹框
   * @property {String} value 是否展示
   * @property {String} title 标题
   * @property {String} showCancel 是否展示取消
   * @property {String} showConfirm 是否展示确认
   * @property {Boolean} maskClose 遮罩点击是否关闭
   * @property {Boolean} closable 是否显示底部关闭按钮
   * @property {Boolean} hideFooter 是否不显示底部footer
   */
  export default {
    name: 've-modal',
    props: {
      modelValue: Boolean,
      title: String,
      showCancel: {
        type: Boolean,
        default: true,
      },
      showConfirm: {
        type: Boolean,
        default: true,
      },
      maskClose: {
        type: Boolean,
        default: false,
      },
      closable: {
        type: Boolean,
        default: false,
      },
      cancelText: {
        type: String,
        default: '关闭',
      },
      okText: {
        type: String,
        default: '确认',
      },
      okLoading: {
        type: Boolean,
        default: false,
      },
      hideFooter: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        visible: this.value,
      }
    },
    methods: {
      close() {
        this.$emit('update:modelValue', false)
        this.$emit('close')
      },
      handleCancel() {
        this.close()
        this.$emit('cancel')
      },
      handleConfirm() {
        if (this.okLoading) return
        this.$emit('confirm')
      },
      handleClose() {
        this.$emit('close')
        this.close()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .ve-modal {
    margin-top: -8px;
    width: 351px;
    padding: 16px 16px 0 16px;
    background: #ffffff;
    border-radius: 8px;
    position: relative;

    &-title {
      font-size: 17px;
      font-weight: 500;
      color: rgba(29, 33, 41, 1);
      line-height: 22px;
      text-align: center;
      margin-bottom: 12px;
    }

    &-body {
      position: relative;
      z-index: 10;
    }

    &-footer {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 54px;
      margin: 0 -16px;
      border-top: 1px solid rgba(229, 230, 235, 1);

      &-button {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        font-weight: 400;
        color: rgba(25, 28, 39, 1);

        &__cancel {
          border-right: 1px solid rgba(229, 230, 235, 1);
        }

        &__confirm {
          color: #3072f6;
        }
      }
    }
    &-close {
      position: absolute;
      bottom: -126rpx;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;

      .line {
        margin-bottom: -4rpx;
        width: 4rpx;
        height: 70rpx;
        background: #fff;
      }
    }
  }

  .custom-loading {
    :deep(.ve-icon) {
      animation: arco-loading-circle 1s infinite cubic-bezier(0, 0, 1, 1);
    }
    display: block;
    margin-bottom: 7px;
  }
  @keyframes arco-loading-circle {
    0% {
      transform: rotate(0);
    }

    to {
      transform: rotate(360deg);
    }
  }
</style>
